<template>
  <div class="display center-x" :style="{ fontSize: `${fontSize}px` }">
    <div class="digital text-nop" v-if="number.zero">{{ number.zero }}</div>
    <div class="digital text-red">{{ number.value }}</div>
  </div>
</template>

<script setup lang="ts">
  import { size } from 'lodash'
  import { computed } from 'vue'
  import { _Number, _String } from '@/utils/props'
  type Props = {
    zero: string | null
    value: string
  }
  const props = defineProps({
    len: _Number(1),
    value: _Number(),
    size: _String('large')
  })
  const fontSize = computed<number>(() => {
    return props.size === 'large' ? 48 : 12
  })
  const number = computed<Props>(() => {
    const value = String(props.value)
    const len = props.len, vSize = size(value)
    if (vSize < len) {
      const arr = Array(len - vSize)
      const zero = arr.fill('0').join('')
      return { zero, value }
    }
    return { zero: null, value }
  })
</script>